﻿@using CoralNode.MvcClient.Helper
@{
    ViewBag.Title = "受访分析-入口排行榜";
    ViewBag.PageModule = "interview";
    ViewBag.CurrentPageUrl = "/m/statistic/interviewentrance?charttype=" + ViewBag.dateselect + "&chartContent=" + ViewBag.chartContent + "&";
}
@Html.IncludePage("CoralAdmin/statistic", "_Left")
<!--content-->
<div id="pbody">
    <div class="extra">
        @Html.IncludePage("CoralAdmin/statistic", "DateSelection")
        <div class="main-box mt_2 mb_2">
            <div class="tab-visit clearfix">
                <a href="/m/statistic/interview?dateStart=@ViewBag.DateStart&dateEnd=@ViewBag.DateEnd&dateselect=@ViewBag.dateselecte">受访排行榜</a>
                <a class="current" href="/m/statistic/interviewentrance?dateStart=@ViewBag.DateStart&dateEnd=@ViewBag.DateEnd&dateselect=@ViewBag.dateselecte">入口排行榜</a>
                <a href="/m/statistic/interviewexit?dateStart=@ViewBag.DateStart&dateEnd=@ViewBag.DateEnd&dateselect=@ViewBag.dateselecte">跳出排行榜</a>
                <a href="/m/statistic/interviewdetail?dateStart=@ViewBag.DateStart&dateEnd=@ViewBag.DateEnd&dateselect=@ViewBag.dateselecte">受访明细</a>
            </div>
            <div class="h_52 clearfix">
                <div class="visit-trend">
                    <div class="l" style="width:49%">
                        <div class="t clearfix">
                            <div class="f_l">
                                <select id="chartContentSelection">
                                    <option @if (ViewBag.chartContent != "pv") {@String.Format("selected=selected")} value="session">来访次数</option>
                                    <option @if (ViewBag.chartContent == "pv") {@String.Format("selected=selected")}  value="pv">站内浏览总次数</option>
                                </select>
                            </div>
                            <div class="filter_btn  filter_btn-2 f_r">
                                <a class="w_3 @if (ViewBag.charttype == "line") {@String.Format("current") }" href="/m/statistic/interviewentrance?dateStart=@ViewBag.DateStart&dateEnd=@ViewBag.DateEnd&dateselect=@ViewBag.dateselect&chartContent=@ViewBag.chartContent&charttype=line"><i class="ico ico_chart_2"></i></a>
                                <a class="w_3 last @if (ViewBag.charttype != "line") {@String.Format("current") }" href="/m/statistic/interviewentrance?dateStart=@ViewBag.DateStart&dateEnd=@ViewBag.DateEnd&dateselect=@ViewBag.dateselect&chartContent=@ViewBag.chartContent&charttype=pie"><i class="ico ico_chart_3"></i></a>
                            </div>
                        </div>
                        @if (ViewBag.charttype != "line") {
                            <div class="cnt_main mt_3" id="chartContainer_1"></div>
                        }
                    </div>
                    @if (ViewBag.charttype != "line") {
                        <div class="r pt_6" style="width: 49%">
                            <div class="cnt_main" id="chartContainer_2"></div>
                        </div>
                    } else{
                        <div class="l pt_3" style="clear:both;width: 99%">
                            <div class="cnt_main" id="chartContainer_2"></div>
                        </div>
                    }
                </div>
            </div> 
        </div>
    </div>
</div>
<script src="/Themes/CoralAdmin/_misc/scripts/Highcharts/js/highcharts.src.js"></script>
<script type="text/javascript">
	$(function () {
	    $("#chartContentSelection").change(function () {
	        window.location = "/m/statistic/interviewentrance?dateStart=@ViewBag.DateStart&dateEnd=@ViewBag.DateEnd&dateselect=@ViewBag.dateselect&charttype=@ViewBag.charttype&chartContent=" + $(this).val();
	    });
	    if (@if (ViewBag.charttype != "line") {@String.Format("true")}else{@String.Format("false")}) {
		    $('#chartContainer_1').highcharts({
			    chart: {
				    plotBackgroundColor: null,
				    plotBorderWidth: null,
				    plotShadow: false
			    },
			    title: {
				    text: ''
			    },
			    tooltip: {
	                formatter: function() {
	                        return '<b>' + this.point.name + '</b><br/>' +
	                            this.series.name + ': ' + this.y + '次';
	                }
			    },
			    plotOptions: {
				    pie: {
					    allowPointSelect: true,
					    cursor: 'pointer',
					    dataLabels: {
						    enabled: true,
						    color: '#000000',
						    connectorColor: '#000000',
						    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
					    }
				    }
			    },
			    series: [@Html.Raw(ViewBag.SeriesPieStr)]
	        });
	    }
		$('#chartContainer_2').highcharts({
			title: {
				text: ''
			},
			xAxis: {
			    categories: [@Html.Raw(ViewBag.CategoriesStr)]
			},
			yAxis: {
				title: {
					text: ''
				}
			},
			tooltip: {
				valueSuffix: '次'
			},
			legend: {
				borderWidth: 0
			},
            series: [@Html.Raw(ViewBag.SeriesStr)]
		});
	});
	</script>